<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <% String path = request.getContextPath();%>
    	<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    	<title> 上传图集</title>
<jsp:include page="/web/manager/inc/header.jsp"></jsp:include>
	<div class="new-patients main_container">
                   <div class="row page-titles mx-0">
                        <div class="col-sm-6 p-md-0">
                            <div class="welcome-text">
                                <h4 class="text-primary">上传图集</h4>
                                <p class="mb-0">Upload Picture</p>
                            </div>
                        </div>
                       
                    </div>
     </div>
     <div class="row">
                        <div class="col-md-12">
                            <div class="card shadow mb-4">
                                
                                <div class="card-body">
                                    <div class="basic-form">
                                    
                                    
                                        <form onSubmit="return Check()" id="formpic" action="<%=path %>/ManagerController?action=uploadPhoto " method="post" enctype="multipart/form-data">
                                            <div class="row" id="edit">
                                                <div class="form-group">
													<span>添加照片</span> <input id="picture" type="file" name="loadPic"/>
												</div>
                                                
                                                <div class="col-xl-12" >
                                                <c:if test="${param.bingo gt 0}" var="result">
                                                	<h3> 上传成功</h3>
                                                </c:if>
                                                <c:if test="${not result}">
                                                </c:if>
                                                <div id="showPic">
                                                
                                                </div>
                                                
                                                    <div class="form-group" >
                                                        <input type="submit"  id="but"  class="btn btn-primary float-end" value="保存">
                                                	</div>
                                            </div>
                                            </div>
                                        </form>
                                        
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
  <jsp:include page="/web/manager/inc/footer.jsp"></jsp:include>
                                        <script type="text/javascript">
                                        $(function(){
                                        	fileRead();
                                        })
                                        function Check(){  
                                        	if(!($("#picture").get(0).files[0])){
                                        		$("#edit h3").remove();
                    	            			$("#edit").append("<h3>传入图片不能为空</h3>")
                                        		return false;                         
                                        	}
                                        	
                                        }
                                        function fileRead(){
                                    		$("#picture").change(function (){
                                    			$("#showPic").empty();
                                    			$("#edit h3").remove();
                                    			var file = $(this).get(0).files[0];
                                    			console.log(file.type);  
                                    			/* if(!/image/w+/.test(file.type)){
                                    				alert("文件必须为图片！");
                                    				return false;
                                    			} */
                                    			var reader = new FileReader();
                                    				/* 将文件读取为一串Data URL字符串
                                    				，将小文件以一种特殊格式的URL地址直接读入页面。
                                    				小文件指图像与html等格式的文件。 */
                                    			reader.readAsDataURL(file);
                                    				
                                    			//.onload() 数据读取成功完成时触发
                                    			reader.onload = function(e){
                                    				$("#showPic").html("<img id='checkPic' style='width:120px; height:120px;' src='"+this.result+"'>");
                                    			}
                                    			
                                    		})
                                    		
                                    	}

                                        </script>